<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="gb18030">
    <title>柴梦泽期末作业</title>
    <meta name="keywords" content="安农大H5创意制作大赛，安农大，h5网页基础" />
    <meta name="description" content="html5网页制作" />
    <link href="css/styles.css" rel="stylesheet">
    <!-- 返回顶部调用 begin -->
    <scriptcss type="text/javascript" src="js/jquery.js"></scriptcss>
    <script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<header>
    <nav id="nav">
        <ul>
            <li><a href="http://www.clzccode.top/" >柴梦泽期末作业</a></li>
            <li><a href="http://www.ahau.edu.cn" target="_blank" title="安徽农业大学官网">安徽农业大学官网</a></li>
            <li><a href="http://tieba.baidu.com/f?kw=%B0%B2%BB%D5%C5%A9%D2%B5%B4%F3%D1%A7&fr=ala0&tpl=5" target="_blank" title="安徽农业大学贴吧">安农大贴吧</a></li>
            <li><a href="http://cet.etest.edu.cn/" target="_blank" title="全国大学英语四六级考试">CET网上报名</a></li>
            <li><a href="http://www.zhihu.com" target="_blank" title="知乎">知乎网站</a></li>
            <li><a href="http://www.xuetangx.com/" target="_blank" title="学堂在线">MOOC公开课</a></li>
            <li><a href="https://github.com/" target="_blank" title="GitHub">GitHub</a></li>
            <li><a href="http://stackoverflow.com/" target="_blank" title="堆栈溢出">Stack Overflow</a></li>
            <li><a href="" target="_blank" title="关于本人">关于本人</a></li>
        </ul>
    </nav>
</header>
<style type="text/css">
    h1 {
        color: skyblue;
    }
</style>
<!--此处为第一主栏目-->
<div id="mainbody">
    <div class="info">
        <figure> <img src="images/art4.jpg"  alt="Panama Hat">
            <figcaption><strong>爱应该是谦虚的，走在创造者的道路上</strong> 每一个不起舞的日子，都是对生命的辜负
                所谓高贵的灵魂，即对自己有敬畏之心
                谦逊基于力量，高傲基于无能。
                没有可怕的深度，就没有美丽的水面</figcaption>
        </figure>
        <div class="card">
            <h1 >柴梦泽期末作业</h1>
            <p>网名：C.L | 川流咫尺</p>
            <p>职业：学生、以后的程序员</p>
            <p>兴趣：敲代码实现功能、理财、实现自我</p>
            <p>Email：uounchuanliu@qq.com</p>
            <p>本站建立：由安农大H5创新制作大赛参与作品而起意成立，目前只是一个静态网页，在后期会逐渐添加后端内容。增加注册和评论功能，分享一些我学习中的收获和经验和网上有用的转发，也用这个作为我学习的记录。也希望能够对大家的学习有所帮助。</p>
            <ul class="linkmore">
            </ul>
        </div>
    </div>
    <!--info end-->
    <div class="blank"></div>
    <div class="blogs">
        <ul class="bloglist">
            <li>
                <div class="arrow_box">
                    <div class="ti"></div>
                    <div class="ci"></div>
                    <h2 class="title"><a href="http://www.jb51.net/html5/441354.html" target="_blank">转:HTML5使用Audio标签实现歌词同步的效果</a></h2>
                    <ul class="textinfo">
                        <a href="/"><img src="images/s1.jpeg"></a>
                        <p> HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签。通过本文给大家介绍HTML5使用Audio标签实现歌词同步的效果，感兴趣的朋友一起学习吧</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">3</a></li>
                        <li class="comments"><a href="#">1</a></li>
                        <li class="icon-time"><a href="#">2017-3-14</a></li>
                    </ul>
                </div>
            </li>
<!--主栏目-->
            <li>
                <div class="arrow_box">
                    <div class="ti"></div>
                    <div class="ci"></div>
                    <h2 class="title"><a href="https://www.zhihu.com/question/23496750" target="_blank">转自知乎：学习Java应该关注哪些网站？</a></h2>
                    <ul class="textinfo">
                        <a href="/"><img src="images/s2.jpg"></a>
                        <p> 学习Java，哪些网站可以对提高Java知识有所帮助？</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">102</a></li>
                        <li class="comments"><a href="#">58</a></li>
                        <li class="icon-time"><a href="#">2017-3-14</a></li>
                    </ul>
                </div>
                <!--主栏目-->
            </li>
            <li>
                <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圆形-->
                    <h2 class="title"><a href="https://zhuanlan.zhihu.com/p/22522537" target="_blank">转:找程序员的工作，你真的准备好了吗？！</a></h2>
                    <ul class="textinfo">
                        <a href="/"><img src="images/s5.jpg"></a>
                        <p> 写在开始：

                            9月开始，校招也陆陆续续的展开了，一如既往的还是那句老话“今年是最难就业季”，光听这句话就挺吓人的，一来是因为好多小伙伴在学校4年就是混过来的，还没有找到自己到底可以做什么的方向，二来是因为所学的专业知识不扎实，怕一面试就露馅。

                            所以，找工作，你真的准备好了吗？</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">15</a></li>
                        <li class="comments"><a href="#">2</a></li>
                        <li class="icon-time"><a href="#">2017-3-14</a></li>
                    </ul>
                </div>
                <!--主栏目-->
            </li>
        </ul>
        <!--bloglist end-->
        <aside>
            <div class="tuijian">
                <h2>知乎及网络资源</h2>
                <ol>
                    <li><span><strong>1</strong></span><a href="https://www.zhihu.com/question/29444491">有什么值得推荐的Java Web练手项目？</a></li>
                    <li><span><strong>2</strong></span><a href="https://www.zhihu.com/question/44188457">曾经在bat网易等大公司实习的你们当年的实力到达了一个什么样的高度？</a></li>
                    <li><span><strong>3</strong></span><a href="https://www.zhihu.com/question/54669084">软件工程专业，怎么利用好大三下学期，大四能够找一个好的公司实习？</a></li>
                    <li><span><strong>4</strong></span><a href="https://www.zhihu.com/question/26350691">大互联网公司的Java类校招对本科生的要求？</a></li>
                    <li><span><strong>5</strong></span><a href="https://www.zhihu.com/question/48626633">Python学习路径？</a></li>
                    <li><span><strong>6</strong></span><a href="https://www.zhihu.com/question/51144781">现在1w-1w5的工作对程序员的要求是什么？</a></li>
                    <li><span><strong>7</strong></span><a href="http://blog.csdn.net/simon_world/article/details/41791277">CSDN:十款经典游戏的Java版本（开源）</a></li>
                    <li><span><strong>8</strong></span><a href="https://pta.patest.cn/pta/test/">PAT题目集</a></li>
                    <li><span><strong>9</strong></span><a href="http://blog.csdn.net/gane_cheng/article/details/52203759#comments">CSDN:利用GitHub搭建个人网站</a></li>
                </ol>
            </div>

           <!---->
            <div class="search">
                <form class="searchform" method="get" action="#">
                    <input type="text" name="s" value="Search" onfocus="this.value=''" onblur="this.value='Search'">
                </form>
            </div>
            <div class="viny">
                <dl>
                    <dt class="art"><img src="images/Don't You Forget.jpg" alt="专辑"></dt>
                    <dd class="icon-song"><span></span>We Don't Talk Anymore</dd>
                    <dd class="icon-artist"><span></span>歌手：Selean Gomez </dd>
                    <dd class="icon-album"><span></span>所属专辑：《We Don't Talk Anymore》</dd>
                    <dd class="icon-like"><span></span><a href="/">喜欢</a></dd>
                    <dd class="music">
                        <audio src="music/We Don't Talk Anymore.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto"></audio>
                    </dd>
                </dl>
            </div>
        </aside>
    </div>
    <!---->
</div>
<!---->
<footer>
    <div class="footer-mid">
        <div class="links">
            <h2>友情链接</h2>
            <ul>
                <li><a href="http://www.ahau.edu.cn" target="_blank">安徽农业大学官网</a></li>
                <li><a href="http://www.zhihu.com" target="_blank">知乎</a></li>
            </ul>
        </div>
        <div class="visitors">
            </section>
        </div>
        <div class="footer-bottom">
            <p>Copyright 2017 Design by <a href="http://www.yangqq.com">C.L</a></p>
        </div>
    </div>
</footer>
</body>
</html>
